<template>
  <div class="home">
    <div id="container"></div>
  </div>
</template>

<script setup lang="ts">
/**
 *todo 方式1 使用的是https引入方式
 */
import { onMounted, ref } from 'vue'
import { mapBase } from '@/utils/map/types'
import { mapInit } from '@/utils/map/index'
const mapObj = ref<mapBase>({
  zoom: 11,
  location: [113.371067, 23.083159],
  viewMode: '2D',
})
const map = ref(null)
onMounted(() => {
  map.value = mapInit(mapObj.value, 'container')
  // 推荐方式
  // map.on('click', onMapClick) // 添加事件
  // map.off('click', onMapClick) // 移除事件
})
// const onMapClick = function (e: any) {
//   console.log('e', e)
// }
</script>

<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100vh;
}
#container {
  width: 100%;
  height: 100vh;
}
</style>
